
<template>
  <!-- 方案详细 -->
  <div>
    <!-- header -->
    <section class="aliyun-topbar">
      <section class="aliyun-topbar-header">
        <section class="aliyun-topbar-element aliyun-logo">
          <!-- <a href class="aliyun-logo-link">
            <span class="topbar-logo-size-cn topbar-logo-new-cn"></span>
          </a>-->
          <router-link to="/">
            <img src="@/assets/logo.png" alt />
          </router-link>
        </section>
      </section>
    </section>

    <!-- 以上header -->
    <!-- 购买bar -->
    <div class="buyTopBar" id="topBar">
      <div class="linkBar">
        <a class="ecsTitle" href="javascript:;">
          <b>{{ SolutionName }}</b>
        </a>
      </div>
    </div>
    <!--以上 购买bar -->

    <!-- 以下container -->
    <div class="container">
      <div v-for="(table, index) in SchemeDetailList" :key="index">
        <div class="section" v-if="table.shpSchemeDetailed">
          <label class="section-title">{{ table.KindName }}</label>
          <div class="section-content">
            <a-table
              :data-source="table.shpSchemeDetailed"
              :row-selection="{ onChange: onSelectChange }"
              :customRow="rowClick"
              :rowClassName="setRowClassName"
            >
              <a-table-column key="ProductName" title="ProductName" data-index="ProductName" />

              <a-table-column
                key="ProductParameter"
                title="ProductParameter"
                data-index="ProductParameter"
              >
                <template slot-scope="text,record">
                  <div v-html="text"></div>
                </template>
              </a-table-column>

              <a-table-column key="quantity" title="Quantity" data-index="Quantity">
                <template slot-scope="text,record">
                  <div>
                    <a-input-number
                      :value="text"
                      :min="0"
                      :max="10000"
                      @change="onChangeQuantity(text,record,$event)"
                    />
                  </div>
                </template>
              </a-table-column>
              <a-table-column key="UnitName" title="Unit" data-index="UnitName" />
              <!-- TemplatePictrue 图片路径 -->
              <a-table-column key="Imgs" title="Imgs" data-index="Imgs">
                <template slot-scope="text,record">
                  <!-- viewer插件接收list -->
                  <viewer style="width: 150px;height: 150px; overflow: hidden;">
                    <div
                      v-for="(item, j) in record.Imgs"
                      :key="j"
                      style="width:150px;height:150px;"
                    >
                      <img :src="item" style="width:150px;height:150px;" />
                    </div>
                  </viewer>
                </template>
              </a-table-column>
              <!-- <a-table-column key="URL" title="URL" data-index="URL" /> -->

              <a-table-column key="Price" title="Price" data-index="Price" />
            </a-table>
            <!-- 小计区域 -->
            <div class="sub_total">
              <div class="price-item">
                <div class="price-name">
                  <span>subTotal：</span>
                  <span class="price-trade">
                    <span class="ng-star-inserted">
                      <span class="price-cny-symbol">$</span>
                      <span class="price-money">{{ sub_total[index] }}</span>
                      <span class="price-cny-unit"></span>
                      <span class="price-count-unit"></span>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="totalPrice sub_total">
        <div class="price-item">
          <div class="price-name">
            <span>Total：</span>
            <span class="price-trade">
              <span class="ng-star-inserted">
                <span class="price-cny-symbol">$</span>
                <span class="price-money">{{ totalAmount }}</span>
                <span class="price-cny-unit"></span>
                <span class="price-count-unit"></span>
              </span>
            </span>
          </div>
        </div>
      </div>

      <!-- 方案步骤 -->
      <!-- <div class="stepDes section">
        <div class="title">Solution steps</div>
        <div class="content"></div>
      </div>-->
      <!-- 按钮 -->
      <div class="section commitBox">
        <div class="btn" @click="creatPDF">creatPDF</div>
        <div class="btn" @click="consult">consult</div>
      </div>
      <!-- 咨询回复框 -->
      <a-modal v-model="showConsult" :footer="null" @cancle="()=>{showConsult=false}">
        <!-- title="Modal"
        ok-text="确认"
        cancel-text="取消"
        @ok="submitConsult"-->
        <div class="consultingBox" ref="consult">
          <div class="title">Artificial consulting</div>
          <a-textarea
            style="height:100%;"
            placeholder="Please enter what you want to consult"
            :rows="8"
            v-model="advice"
          />
          <div class="flex btnBox">
            <div class="btn" @click="submitAdvice">cancle</div>

            <div class="btn" @click="submitAdvice">submit</div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- <div class="mask"></div> -->
  </div>
</template>

<script>
import pk from '@/public/public'
import { slider, slideritem } from 'vue-concise-slider'
export default {
  name: 'PlanInDetail',
  data() {
    return {
      selectedRowKeys: [], // Check here to configure the default column
      SchemeDetailList: [], //方案列表
      selectedKeyList: [],
      kindIdList: [], // 模块id list
      defaultImg: require('../../assets/img/index/Picture1.jpg'),
      schemeImgRandomList: [
        { src: '001.png' },
        { src: '002.png' },
        { src: '003.png' },
        { src: '004.png' },
        { src: '005.png' },
        { src: '006.png' }
      ],
      flowImgList: ['flow1.jpg', 'flow2.jpg', 'flow3.jpg'],
      stepInstructions: '', //步骤说明
      tableList1: [],
      totalAmount: 0, //总金额
      currentNum: 0,
      sub_total: [],
      loading: false,
      current: 0,
      currentPage: 0, //当前页面
      SchemeId: 0, //方案id
      currentScheme: 0, //当前方案
      shpSchemeKind: [],
      SolutionName: '',
      showConsult: false,
      advice: '', // 建议

      options: {
        pagination: true,
        thresholdDistance: 100, // Sliding distance threshold
        thresholdTime: 300, // Sliding time threshold decision
        grabCursor: true, // Scratch style
        speed: 300, // Sliding speed
        // timingFunction: 'ease', // Sliding mode
        loop: true, // Infinite loop
        autoplay: 2500 // Auto play[ms]
      },
      steps: [
        {
          title: 'First',
          content: 'First-content'
        },
        {
          title: 'Second',
          content: 'Second-content'
        },
        {
          title: 'Last',
          content: 'Last-content'
        }
      ]
    }
  },
  components: {
    slider,
    slideritem
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  watch: {
    totalAmount() {
      this.sub_total.reduce((x, y) => {
        return x + y
      })
    }
  },

  mounted() {
    console.log(this.$route, 'refs')
    this.$route.query.detail = JSON.parse(this.$route.query.detail)
    this.SchemeId = this.$route.query.detail.SchemeId
    // this.SecondTitle = this.$route.query.detail.SecondTitle
    this.shpSchemeKind = this.$route.query.detail.shpSchemeKind
    this.SolutionName = this.$route.query.detail.SolutionName
    this.getTableList()
  },
  methods: {
    getImgUrl(url) {
      const a = require('../../assets/img/index/' + url)
      return a

      console.log(a)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // this.selectedRowKeys = selectedRowKeys
      console.log('row', selectedRows) //选中行的数据
      const index = this.getIndex(this.kindIdList, selectedRows[0].KindId)
      console.log(index, 'index')
      let num = 0
      for (const rowSingle of selectedRows) {
        console.log('rowSingle :>> ', rowSingle.KindId)
        num = num + rowSingle.Price * rowSingle.Quantity
        this.sub_total[index] = num
      }
      // this.sub_total[index] = pk.toDecimal2(this.sub_total[index])
      this.totalAmount = this.sub_total.reduce((x, y) => {
        return x + y
      })
    },
    setRowClassName(row) {},
    // table点击当前行
    rowClick(row) {
      // console.log(text, record)
    },
    onChangeQuantity(text, record, event) {
      console.log(record, 'record', text, 'text', event, 'event')
      record.Quantity = event
      // console.log(table)
    },
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    creatPDF() {},
    // consult
    consult() {
      this.advice = ''
      this.showConsult = true
    },
    // 方案详情
    getTableList() {
      const that = this
      const p = {
        method: 'ShpSchemeDetailed_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: this.currentPage,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.SchemeId
        }
      }
      this.$post(p).then(result => {
        for (let index = 0; index < result.data.shpSchemeKind.length; index++) {
          if (result.data.shpSchemeKind[index].shpSchemeDetailed) {
            result.data.shpSchemeKind[index].shpSchemeDetailed.map(item => {
              item.Imgs = eval('(' + item.Imgs + ')')
              return item
            })
          }
        }
        const SchemeDetailList = result.data.shpSchemeKind
        this.SchemeDetailList = SchemeDetailList
        console.log(this.SchemeDetailList, 'SchemeDetailList')
        // console.log(that.tableList1, 'SchemeDetailList[0]')
        this.kindIdList = []
        this.SchemeDetailList.map(item => {
          this.kindIdList.push(item.shpSchemeDetailed[0].KindId)
          item.Money = 0
          return item
        })
      })
    },
    getIndex(arr, item) {
      for (var i in arr) {
        if (arr[i] == item) {
          return i
        }
      }
    },
    submitAdvice() {
      // 提交咨询
      console.log(this.advice)
    },
    cancleSubmit() {
      this.showConsult = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('css/PlanInDetail.less');
</style>